<template>
  <div>
    <h1>泥头车</h1>
    <!-- <button @click="goto">跳转</button> -->
    <h3>{{ this.$store.state.message }}</h3>
    <h3>{{ this.$store.state.data }}</h3>
    <button @click="change">改变全局组件信息</button>
    <button @click="changedata">改变全局组件信息</button>
    <button @click="changedataAsync">Async改变全局组件信息</button>
  </div>
</template>
<script>
export default {
  // 动态路由会缓存之前的路由页面
  // 再次进入时，不会再执行生命周期
  mounted() {
    // console.log(this);
    // 可以通过$route对象里面的parmas属性获取地址栏上的值
    // console.log(this.$route.params.id);
    // 一般来说 $route 是用来获取值的
    // $router是用来传值的
  },
  watch: {
    $route(newVal, oldVal) {
      console.log(newVal.params, oldVal.params);
    },
    // $route: {
    //   immediate: true,
    //   handler(newVal, oldVal) {
    //     console.log(newVal.params, oldVal.params);
    //   },
    // },
  },
  methods: {
    changedataAsync() {
      this.$store.dispatch("changeMessageAsync", "这次是异步修改了呢");
    },
    change() {
      this.$store.commit("changeMessage", "改变信息了哦");
    },
    changedata() {
      this.$store.commit("changeData", { name: "李四", age: 99 });
    },
    goto() {
      this.$router.push({
        // path: "home",
        // query: {
        //   a: 1,
        //   b: 2,
        // },
        name: "home",
        params: {
          a: 1,
          b: 2,
        },
      });
    },
  },
};
</script>
